<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		  }
		  .avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		  }
		  .avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		  }
		  .avatar {
			width: 178px;
			height: 178px;
			display: block;
		  }
		  .is-selected {
		      color: #1989FA;
		    }
		</style>

	</head>
	<body>
		<div id="app">
			<!-- <i class="el-icon-platform-eleme"></i>
			<el-button type="primary" icon="el-icon-platform-eleme">搜索</el-button>
			<el-link type="info">信息链接</el-link>
			<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
			<el-link type="primary">主要链接</el-link>


			<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
			<div style="margin: 15px 0;"></div>
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
				<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
			</el-checkbox-group>


			<el-input v-model="input" clearable :disabled="flag" placeholder="请输入内容"></el-input>


			<el-input-number v-model="num" @change="aavs" :min="1" :max="10" label="描述文字"></el-input-number>

			<input type="text" v-model="value" />

			<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0">
			</el-switch> -->

			<!-- 
			<el-upload class="avatar-uploader" 
				action="/file/upload" 
				:show-file-list="false"
				:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
				<img v-if="imageUrl" :src="imageUrl" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload> -->


			<!-- <el-form ref="form" :model="form" label-width="80px">
			  <el-form-item label="活动名称">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="活动区域">
			    <el-select v-model="form.region" placeholder="请选择活动区域">
			      <el-option label="区域一" value="shanghai"></el-option>
			      <el-option label="区域二" value="beijing"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="活动时间">
			    <el-col :span="11">
			      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
			    </el-col>
			    <el-col class="line" :span="2">-</el-col>
			    <el-col :span="11">
			      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
			    </el-col>
			  </el-form-item>
			  <el-form-item label="即时配送">
			    <el-switch v-model="form.delivery"></el-switch>
			  </el-form-item>
			  <el-form-item label="活动性质">
			    <el-switch v-model="form.type"></el-switch>
			  </el-form-item>
			  <el-form-item label="特殊资源">
			    <el-radio-group v-model="form.resource">
			      <el-radio label="线上品牌商赞助"></el-radio>
			      <el-radio label="线下场地免费"></el-radio>
			    </el-radio-group>
			  </el-form-item>
			  <el-form-item label="活动形式">
			    <el-input type="textarea" v-model="form.desc"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">立即创建</el-button>
			    <el-button>取消</el-button>
			  </el-form-item>
			</el-form> -->

			<!-- <el-table :data="studentList" style="width: 100%">
				<el-table-column prop="birthday" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
				<el-table-column label="编辑">				
					<template slot-scope="scope">
						<el-button @click="dialogFormVisible=true" type="primary" icon="el-icon-edit" circle></el-button>
						<el-button @click="del(scope.row.name)" type="danger" icon="el-icon-delete" circle></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination 
			 @size-change="handleSizeChange"
			 @current-change="handleCurrentChange" 
			 :current-page.sync="currentPage4"
			 :page-sizes="[10, 20, 30, 40]" 
			 :page-size="100" 
			 layout="total, sizes, prev, pager, next, jumper" 
			 :total="total">
			</el-pagination>
			
			
			<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
			  <el-form :model="form">
			    <el-form-item label="活动名称" >
			      <el-input v-model="form.name" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="活动区域">
			      <el-select v-model="form.region" placeholder="请选择活动区域">
			        <el-option label="区域一" value="shanghai"></el-option>
			        <el-option label="区域二" value="beijing"></el-option>
			      </el-select>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="save">确 定</el-button>
			  </div>
			</el-dialog>
			 -->
			
			<!-- <el-date-picker
			  v-model="value1"
			  type="datetimerange"
			  start-placeholder="开始日期"
			  end-placeholder="结束日期"
			  :default-time="['12:00:00']">
			</el-date-picker> -->
			
		
			
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					value1: '',
					value: new Date(),
					dialogFormVisible:false,
					form:{},
					total:100,
					currentPage4: 2,
					studentList: [{
						birthday: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}, {
						date: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1517 弄'
					}, {
						date: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1519 弄'
					}, {
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}]
				}
			},
			created() {
				this.form = {
					name: "张然"
				}
			},
			methods: {
				con(){
					console.log(123)
				},
				del(name){
					console.log(name)
				},
				save(){
					console.log("保存了"+this.form)
					this.dialogFormVisible=false
				},
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
				},
				onSubmit() {
					console.log(this.form);
				}
			}
		})
	</script>
</html>
